<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .carton{
        transition: height 5s;
    }
</style>


</head>
<body>
<div>


<template>
    <div class="hello">
        <div id="test" style="overflow-y:hidden;height:0px;">
            <el-table :data="list" id="table">
                <el-table-column label="数据列1" prop="key1"></el-table-column>
                <el-table-column label="数据列2" prop="key2"></el-table-column>
                <el-table-column label="数据列3" prop="key3"></el-table-column>
                <el-table-column label="数据列4" prop="key4"></el-table-column>
                <el-table-column label="数据列5" prop="key5"></el-table-column>
                <el-table-column label="数据列6" prop="key6"></el-table-column>
            </el-table>
        </div>
        <el-button @click="showTable">显示</el-button>
        <el-button @click="hiddenTable">隐藏</el-button>
    </div>
</template>
</div>
</body>
<script>

    showTable: function ff() {
        const div1 = document.getElementById('test')
        const div2 = document.getElementById('table')
        div1.style.height = div2.offsetHeight + 'px'
    };

    hiddenTable: function uu() {
        const div1 = document.getElementById('test')
        div1.style.height = '0px'
    }
</script>

</html>